<template>
  <div class="watermark">
    <div class="aside-left right8" :style="{minWidth: device == 'mobile'?'100%': ''}">
      <cfCard title='水印预览' class='page-container-top'>
        <div slot='content'>
          <div class="preview-area" v-watermark="form"></div>
        </div>
      </cfCard>
    </div>
    <div class="aside-right" :style="{width: device == 'mobile'?'100%': ''}">
      <cfCard title='水印设置' class='page-container-top'>
        <div slot='btn'>
          <span class="link-span">保 存</span>
        </div>
        <div slot='content'>
          <div class="bottom24"></div>
          <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="small">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="水印类型">
                  <el-select v-model="form.applicationContent" style="width: 100%;">
                    <el-option label="文字" :value="1"></el-option>
                    <el-option label="文字+时间" :value="2"></el-option>
                    <el-option label="用户名+时间" :value="3"></el-option>
                    <el-option label="自定义" :value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="水印文字">
                  <el-input v-model="form.text" :disabled="form.applicationContent == 3"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="字 体">
                  <el-input v-model="form.fontStyle"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="字体颜色">
                  <el-color-picker v-model="form.color"></el-color-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="字体大小">
                  <el-input type="number" v-model="form.fontSize" min="14"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="透明度">
                  <el-input type="number" v-model="form.opacity" min="0" max="100"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="倾斜度">
                  <el-input type="number" v-model="form.angel" min="-45" max="45"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="X轴间距">
                  <el-input type="number" v-model="form.spaceX" min="60"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="Y轴间距">
                  <el-input type="number" v-model="form.spaceY" min="60"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="X轴偏移量">
                  <el-input type="number" v-model="form.offsetX" min="0"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="Y轴偏移量">
                  <el-input type="number" v-model="form.offsetY" min="60"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </cfCard>
    </div>
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          applicationContent: 2,
          angel: "-30",
          text: "武汉江汉城市科技",
          waterTime: this.formatDate('', false),
          fontSize: "28",
          color: 'red',
          opacity: "30",
          fontStyle: "KaiTi",
          spaceX: "200",
          spaceY: "80",
          id: "8581542672752214016",
          offsetX: "0",
          offsetY: "60",
          status: "0",
        }
      }
    },
    computed: {
      userName() {
        return this.$store.getters.name;
      },
      device() {
        return this.$store.getters.device;
      }
    },
    watch: {
      'form.applicationContent': {
        handler(newVal) {
          switch (newVal) {
            case 1: /**文字 */
              this.form.text = '武汉江汉城市科技';
              this.form.waterTime = null;
              break;
            case 2: /**文字+时间 */
              this.form.text = '武汉江汉城市科技';
              this.form.waterTime = this.formatDate('', false);
              break;
            case 3: /**用户名+时间 */
              this.form.text = this.userName;
              this.form.waterTime = this.formatDate('', false);
              break;
            case 4:
              this.form.text = null;
              this.form.waterTime = null;
              break;
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.watermark {
  display: flex;
  width: 100%;
  height: 100%;
  .aside-left {
    flex: 1.5;
    min-width: 600px;
    height: 100%;
    background: #fff;
    position: relative;
    .preview-area {
      width: 90%;
      height: 80%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background: #eee;
      border: 1px solid #eee;
    }
  }
  .aside-right {
    width: 500px;
    flex-shrink: 0;
    background: #fff;
  }
}
</style>